<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { createMap, getSelectItem, PointType } from "../methods/index";
import { MapBrowserEvent, Overlay } from "ol";
import { transform4326to3857 } from "../methods/utils/transform";

const mapBox = ref();

onMounted(() => {
  const map = createMap({
    target: mapBox.value,
  });

  map.on("singleclick", function (e: MapBrowserEvent<MouseEvent>) {
    const item = getSelectItem(e);
    if (item) {
      console.log("点击到", item);
    } else {
      console.log("点击到空白区域");
    }
  });

  /* map.drawPoints(
    [
      {
        lng: 117.123962,
        lat: 40.130056,
      },
    ],
    {
      style: {
        type: PointType.Circle,
        radius: 10,
        color: "rgba(0,0,0,0.5)",
        sizeFit: true,
      },
    }
  ); */
  map.drawPoints(
    [
      {
        a: 118.123962,
        b: 41.130056,
      },
    ],
    {
      getLngKey: "a",
      getLatKey: "b",
      style: {
        type: PointType.Image,
        rotation: 0,
        anchor: [0.5, 1],
        sizeFit: true,
      },
    }
  );

  map.drawPoints(
    [
      {
        a: 117.123962,
        b: 40.130056,
      },
    ],
    {
      getLngKey: "a",
      getLatKey: "b",
      style: {
        type: PointType.Image,
        rotation: 0,
        anchor: [0.5, 1],
        sizeFit: true,
      },
    }
  );
});
</script>

<template>
  <div ref="mapBox" style="width: 100%; height: 100%"></div>
</template>

<style scoped></style>
